﻿@{
    ViewBag.Title = "createProduct";
}

<h2> Create the product</h2>
<form>
    The name of the new product: <input type="text" id="newProduct" autocomplete="off" /> <br>
    The main category: <input type="text" id="mainCategory" autocomplete="off" /> <br>
    Subcategory: <br>
    Add new subcategory: <input type="text" id="subcategoryAdd" autocomplete="off" /><br>
    <input type="button" value="add sub category" onclick="subcategoryadd()" /><br>
    <select name="selecName" id="categorySelect" multiple autocomplete="off"></select><br>
    Remove the selected subcategory by highlight the subcategories, and press the "remove" button: <br>
    <input type="button" value="remove" onclick="removeSubcategory()" /><br>
    Give materials: <br>

    Add new materials: <input type="text" id="materialsAdd" autocomplete="off" /><br>
    <input type="button" value="add materials" onclick="materialsadd()" /><br>
    <select name="selecName" id="materialsSelect" multiple autocomplete="off"></select><br>
    Remove the selected materials by highlight the materials, and press the "remove" button: <br>
    <input type="button" value="remove" onclick="removeMaterials()" /><br>
    Description: <br>
    <textarea rows="5" cols="50" id="description" autocomplete="off"> </textarea> <br>
    <input type="button" value="create" id="create" onclick="Create()" /> <br>

</form>

<script>
    function subcategoryadd() {
        isExist = 0;
        subcategoryAdd = document.getElementById("subcategoryAdd");
        if (subcategoryAdd.value == "") {
            alert("You must give the subcategory");
            return;
        }
        if (subcategoryAdd.value.search(/\d/i) != -1) {
            alert("Do not give number to the  name of the subcategory");
            subcategoryAdd.value = "";
            return;
        }
        $("#categorySelect option").each(function () {

            if ($(this).val() == subcategoryAdd.value) {
                alert("This category exists");
                subcategoryAdd.value = "";
                isExist = 1;
                return;
            }
        });
        if (isExist == 1) {
            return;
        }
        $('#categorySelect').append($("<option></option>")
                    .attr("value", subcategoryAdd.value)
                    .text(subcategoryAdd.value));
        subcategoryAdd.value = "";
    }
    function removeSubcategory() {
        var action_list = document.getElementById("categorySelect");

        // Remember selected items.
        var is_selected = [];
        for (var i = 0; i < action_list.options.length; ++i) {
            is_selected[i] = action_list.options[i].selected;

        }

        // Remove selected items.
        i = action_list.options.length;
        while (i--) {
            if (is_selected[i]) {
                action_list.remove(i);
            }
        }
    }
    function materialsadd() {
        isExist = 0;
        materialsAdd = document.getElementById("materialsAdd");
        if (materialsAdd.value == "") {
            alert("You must give the material");
            return;
        }
        if (materialsAdd.value.search(/\d/i) != -1) {
            alert("Do not give number to the  name of the material");
            materialsAdd.value = "";
            return;
        }
        $("#materialsSelect option").each(function () {

            if ($(this).val() == materialsAdd.value) {
                alert("This material exists");
                isExist = 1;
                materialsAdd.value = "";
                return;
            }
        });
        if (isExist == 1) {
            return;
        }
        $('#materialsSelect').append($("<option></option>")
                    .attr("value", materialsAdd.value)
                    .text(materialsAdd.value));
        materialsAdd.value = "";
    }
    function removeMaterials() {
        var action_list = document.getElementById("materialsSelect");

        // Remember selected items.
        var is_selected = [];
        for (var i = 0; i < action_list.options.length; ++i) {
            is_selected[i] = action_list.options[i].selected;

        }

        // Remove selected items.
        i = action_list.options.length;
        while (i--) {
            if (is_selected[i]) {
                action_list.remove(i);
            }
        }
    }
    function Create() {
        newProduct = document.getElementById("newProduct");
        mainCategory = document.getElementById("mainCategory");
        categorySelect = document.getElementById("categorySelect"); //select must contain min 1 option
        materialsSelect = document.getElementById("materialsSelect"); //select mus contain min 1 option
        if (newProduct.value == "") {
            alert("You must give the name of the new product");
            return;
        }
        if (mainCategory.value == "") {
            alert("You must give the main category");
            return;
        }
        if (newProduct.value.search(/\d/i) != -1) {
            alert("Do not give number to the  name of the new product");
            newProduct.value = "";
            return;
        }
        if (mainCategory.value.search(/\d/i) != -1) {
            alert("Do not give number to the  name of the main category");
            mainCategory.value = "";
            return;
        }
        if (categorySelect.options.length == 0) {
            alert("You must give min 1 subcategory");
            return;
        }
        if (materialsSelect.options.length == 0) {
            alert("You must give min 1 material");
            return;
        }
        newProduct.value = "";
        mainCategory.value = "";
        categorySelect.options.length = 0;
        materialsSelect.options.length = 0;
        document.getElementById("description").value = "";
        alert("OK");
    }
</script>